let tabs = document.querySelectorAll('#tabs li>a');
let con = document.querySelector('#con');
let singleLi = document.querySelector('#con>li');

for (let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click',function(){
        this.classList.add('active');
        for (let j = 0; j < this.parentNode.parentNode.childNodes.length; j++) {
            if (this.parentNode.parentNode.childNodes[j].childNodes[0] != undefined 
                && this.parentNode.parentNode.childNodes[j].childNodes[0] != this) {
                this.parentNode.parentNode.childNodes[j].childNodes[0].classList.remove('active');
            }
        }
        con.scrollTop = i * singleLi.offsetHeight;
    });
}


con.addEventListener('scroll', function(){

    // console.log('offsetTop', con.offsetTop);
    // console.log('scrollTop', con.scrollTop);
    // console.log('offset().top', $('#con').offset().top);

    let current = parseInt(con.scrollTop / singleLi.offsetHeight);
    if (Math.abs(con.scrollTop - (singleLi.offsetHeight * tabs.length - con.offsetHeight)) <= 5) {
        current = tabs.length - 1;
    }

    for (let i = 0; i < tabs.length; i++) {
        tabs[current].classList.add('active');
        for (let j = 0; j < tabs[current].parentNode.parentNode.childNodes.length; j++) {
            if (tabs[current].parentNode.parentNode.childNodes[j].childNodes[0] != undefined 
                && tabs[current].parentNode.parentNode.childNodes[j].childNodes[0] != tabs[current]) {
                    tabs[current].parentNode.parentNode.childNodes[j].childNodes[0].classList.remove('active');
            }
        }
    }
});

let back = document.querySelector('.back');
back.addEventListener('click', function(){
    // history.back();
    history.go(-1);
});

let search = document.querySelector('.searchBar input');
search.addEventListener('focus', function(){
    console.log(123);
    location.href = 'search.html'
});